<template>
    <div class="app-container">
        <div class="margin-10 ">
            <el-radio-group v-model="deptTemp" @input="searchData">
                <el-radio-button :label="1">个人</el-radio-button>
                <el-radio-button :label="2">科室</el-radio-button>
            </el-radio-group>
        </div>
        <div style="display: flex;">

            <div class="temp-box" v-for="(item, index) in cateAry" :key="index">
                <div class="temp-title ">{{ item }}</div>
                <div class="padding-10" v-if="deptTemp == '1'">
                    <el-button-group>
                        <el-button type="primary" size="mini" @click="addTemp(item)">增加</el-button>
                        <el-button type="danger" size="mini" @click="delTemp(item)">删除</el-button>
                        <el-button type="info" size="mini" @click="upTemp(item)">上移</el-button>
                        <el-button type="info" size="mini" @click="downTemp(item)">下移</el-button>
                    </el-button-group>
                </div>
                <div class="temp-text">
                    <p v-for="(it, index) in tempData[item]" :key="it.id" class="temp-item"
                        :class="{ selected: it.id === selectedIndex }" @click="handleCurrentChange(it)">{{
                            it.describe }} <span v-if="it.spec">[ {{ it.spec }}
                            ]</span> </p>
                </div>
            </div>
        </div>
        <el-dialog title="添加模版" :visible.sync="addVisible" width="30%" :before-close="handleClose">
            <el-autocomplete v-model="desc" suffix-icon="el-icon-search" :fetch-suggestions="querySearchAsync"
                style="width: 400px;" placeholder="请输入..." @select="getresult">
                <template slot-scope="{item}">
                    <div class="name" style="width: 400px;">{{ item.name }}【{{
                        item.code }}】</div>
                </template>
            </el-autocomplete>

            <el-input v-model="remark" style="width: 400px;margin-top: 40px;" placeholder="请输入备注内容..."></el-input>

            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveTemp()">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
import { orderTempSelect, orderTempAdd, orderTempDel } from '@/api/doctor/patient'
import { Select } from 'element-ui';
import { orderTempUpdate } from '../../api/doctor/patient';
export default {
    name: "diag",
    data() {
        return {
            deptTemp: "1",
            addVisible: false,
            desc: "",
            remark: "",
            doctor: { code: "8699", name: 'lili', dept: '209' },
            tempData: [],
            cateAry: [],
            diagData: [],
            currentItem: "",
            drugList: [
                {
                    name: '阿莫西林分散片', code: 'Y213120000', price: '1.9', unit: "盒"
                },
                {
                    name: '头孢克肟咀嚼片', code: 'Y213120001', price: '3.7', unit: "盒"
                }
            ],
            diagLabel: [
                { label: '类型', width: '100', prop: 'type', type: 'string' },
                { label: 'ICD编码', width: '', prop: 'icd', type: 'string' },
                { label: '诊断名称', width: '', prop: 'diag', type: 'string' },
                { label: '诊断备注', width: '', prop: 'remark', type: 'string' },
            ],
            selectedIndex: -1
        };
    },
    mounted() { this.loadData(this.doctor.code) },
    methods: {
        addTemp(item) {
            this.currentItem = item
            this.addVisible = true
        },
        handleClose() {
            this.addVisible = false
        },
        //模糊查询后台数据
        querySearchAsync(queryString, cb) {
            var drugList = this.drugList;
            var results = drugList;
            cb(results)
        },
        getresult(item) {
            this.desc = item.name
        },
        saveData() {
            const sort = this.tempData[this.currentItem].at(-1).sort

            const obj = {
                name: this.currentItem,
                describe: this.desc,
                remark: this.remark,
                sort: parseInt(sort) + 1
            }
            orderTempAdd(obj).then(res => {
                if (res) {
                    this.loadData(this.doctor.code)
                }
            })

        },
        //保存模版数据
        saveTemp() {
            this.$confirm('是否保存当前数据！', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.saveData()
                this.addVisible = false
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
            }).catch(() => {

            });

        },
        searchData() {
            if (this.deptTemp === 1) {
                this.loadData(this.doctor.code)
            } else {
                this.loadData("")
            }
        },
        loadData(creator) {
            orderTempSelect({ creator: creator }).then(res => {
                if (res) {
                    let ary = []
                    const groupedAndSortedItems = res.reduce((acc, item) => {
                        if (!acc[item.name]) {
                            acc[item.name] = [];
                        }
                        ary.push(item.name)
                        acc[item.name].push(item);
                        return acc;
                    }, {});

                    Object.values(groupedAndSortedItems).forEach(group => {
                        group.sort((a, b) => a.sort - b.sort);
                    });
                    this.tempData = groupedAndSortedItems
                    this.cateAry = Array.from(new Set(ary));
                }
            })
        },
        //选中高亮
        handleCurrentChange(it) {
            this.selectedIndex = it.id;
            this.currentItem = it.name

        },
        delTemp(item) {
            if (item === this.currentItem && this.selectedIndex != -1) {
                this.$confirm('是否删除当前数据！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    orderTempDel({ id: this.selectedIndex }).then(res => {
                        if (res) {
                            this.loadData(this.doctor.code)
                        }
                    })
                    this.$message({
                        type: 'success',
                        message: '移除成功!'
                    });
                }).catch(() => {

                });
            } else {
                this.$message('请选择数据！');
            }

        },
        upTemp(item) {
            var selectedIndex = this.selectedIndex
            if (selectedIndex === -1) {
                this.$message('请选择数据！');
                return;
            }
            const currentAry = this.tempData[item]

            const currentItem = currentAry.filter(function (element) {
                return element.id === selectedIndex
            });
            let ids = currentAry.map(item => item.id);
            let index = ids.indexOf(selectedIndex)
            if (index === 0) {
                this.$message('当前数据不可上移！');
            } else {
                let sort = parseInt(currentItem[0].sort)
                let sortUp = parseInt(currentAry[index - 1].sort)
                let idUp = parseInt(currentAry[index - 1].id)

                orderTempUpdate({ sort: sortUp, id: selectedIndex }).then(res => {
                    if (res) { }
                })
                orderTempUpdate({ sort: sort, id: idUp }).then(res => {
                    if (res) {
                        this.loadData(this.doctor.code)
                    }
                })
            }


        },
        downTemp(item) {
            var selectedIndex = this.selectedIndex
            if (selectedIndex === -1) {
                this.$message('请选择数据！');
                return;
            }
            const currentAry = this.tempData[item]
            var selectedIndex = this.selectedIndex
            const currentItem = currentAry.filter(function (element) {
                return element.id === selectedIndex
            });
            let ids = currentAry.map(item => item.id);
            let index = ids.indexOf(selectedIndex)
            if (index === ids.length - 1) {
                this.$message('当前数据不可下移！');
            } else {
                let sort = parseInt(currentItem[0].sort)
                let sortUp = parseInt(currentAry[index + 1].sort)
                let idUp = parseInt(currentAry[index + 1].id)

                orderTempUpdate({ sort: sortUp, id: selectedIndex }).then(res => {
                    if (res) { }
                })
                orderTempUpdate({ sort: sort, id: idUp }).then(res => {
                    if (res) {
                        this.loadData(this.doctor.code)
                    }
                })
            }


        },
    }

};
</script>

<style lang="scss" scoped>
.app-container {
    padding: 20px;
    height: 100%;
}

.selected {
    background-color: aliceblue;
}

.card-main {
    border: 1px solid #d7dae2;
    height: 900px;
    border-radius: 5px;
}

.card-message {
    border: 1px solid #d7dae2;
    height: 900px;
}

.message-title {
    font-weight: 400;
    padding: 10px;
}

.patient-row {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.record-item {
    margin: 30px;
}

.label {
    color: #666666;
    width: 7em;
}

.value {
    color: #333333;
    text-align: right;
}

.pat-name {
    padding: 10px;
    border-bottom: 1px solid #dcdfe6;
}

.order-box {
    height: 550px;
    overflow-y: auto;
    border-bottom: 1px solid #dcdfe6;
}

.top-nav {
    margin-top: -35px;
}

.unstyled {
    list-style: none;
}

.d-none {
    display: none;
}

.pull-right {
    float: right;
}

.mb-10 {
    margin-bottom: 10px;
}

.margin-10 {
    margin: 10px;
}

.padding-10 {
    padding: 10px;
}

.temp-box {
    margin: 10px;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    width: 260px;
    text-align: center;
}

.temp-text {
    padding-left: 10px;
    text-align: left;
    height: 300px;
    margin-left: 5px;
    overflow-y: auto;
}

.border {
    border: 1px solid #dcdfe6;
}

.temp-title {
    line-height: 35px;
    color: rgb(65, 144, 255);
    background: rgb(236, 244, 255);
    padding-left: 10px;
}

.temp-item {
    padding: 5px 0;
    margin: 5px 0;
}
</style>
